<template>
  <scroll-view scroll-with-animation class="goods-list-box" :scroll-y="goodsIsScroll" @scroll.stop="goodsScroll"
    :scrollTop="rightScrollTop">
    <view class="good-list">
      <!--产品展示列表-->
      <block v-for="(item, i) in listTemp" :key="i">
        <view class="g-list" :data-id="item.category_no" :id="'sort_' + item.category_no">
          <view class="good-cls" :data-id="item.category_no" v-if="showCls">
            {{ item.category_name }}
          </view>
          <block v-for="(good, good_index) in item.product" :key="good.product_no">
            <block v-if="isCart && (good.qty == undefined || good.qty == 0)">
            </block>
            <block v-else>
              <block v-if="isCart && (good.qty == undefined || good.qty == 0)">
              </block>
              <view :id="'good' + good.product_no" :class="{
                'good-li': true,
                'is-c-out': good.is_c_out,
              }" v-else>
                <view class="good-img" v-show="!isCart">
                  <image :src="good.line_image_url" mode="widthFix" @click="goodSelect(good)" />
                  <view class="sell-out" v-if="good.is_c_out">售罄</view>
                </view>
                <view class="good-num" v-if="!isCart && cart_qty[good.product_no]">{{ cart_qty[good.product_no] }}</view>
                <view class="flex-item">
                  <view class="good-name" @click="goodSelect(good)">
                    <view>{{ good.product_name }}</view>
                    <!--套餐-->
                    <view class="combos-key" v-if="isCart && good.product_kind == 2">
                      <!--循环规格-->
                      <view v-for="(combos_item, combos_item_index) in good.combos" :key="combos_item_index">
                        -{{ combos_item.product_name }}x{{ combos_item.qty
                        }}<br />
                      </view>
                      <view>{{ good.food_property }}</view>
                    </view>
                  </view>
                  <view class="good-bottom">
                    <view class="good-price" @click="goodSelect(good)">
                      <view class="red">
                        ￥{{ isCart ? good.total : good.price }}
                        <view style="margin-left: 10rpx">
                          <u-tag text="会员价" type="warning" size="mini2" :plain="true" v-if="good.tag == 4"></u-tag>
                          <u-tag text="特价" type="error" size="mini2" v-if="good.tag == 1"></u-tag>
                        </view>
                      </view>
                      <view class="gray" v-if="good.tag != 0">
                        ￥{{ good.current_price }}
                      </view>
                      <view class="spec-key" v-if="isCart && good.product_kind == 1">
                        {{ good.food_property }}
                      </view>
                    </view>
                    <view style="display: flex; flex-direction: row">
                      <block v-if="good.is_c_out">
                        <text style="font-size: 26rpx">已售罄</text>
                      </block>
                      <block v-else>
                        <block v-if="good.is_select || isCart">
                          <view v-if="isCart" class="iconfont vivipos-icon-minus"
                            @click="changeCart('-', good, good_index)">
                          </view>
                          <view v-if="isCart" style="
                            width: 80rpx;
                            text-align: center;
                            font-size: 36rpx;
                          ">{{ good.qty }}</view>
                          <view class="iconfont vivipos-icon-tianjia" @click="changeCart('+', good, good_index)"></view>
                        </block>
                        <block v-else>
                          <view class="btn-spec" v-if="good.product_kind == 1" @click="specSelect(good)">选规格</view>
                          <view class="btn-spec" v-if="good.product_kind == 2" @click="composeSelect(good)">选规格</view>
                        </block>
                      </block>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </block>
        </view>
      </block>
      <view :style="{ height: '110rpx', width: '100%' }"> </view>
      <!--菜品介绍弹窗-->
      <u-popup :safeAreaInsetBottom="true" :duration="200" :show="showGoodSelect" :round="40" mode="center"
        :closeable="true" @close="goodClose" :customStyle="currentGoodStyle" @touchmove.stop>
        <view class="current-good-box" v-if="currentGood != []">
          <view class="good-name">
            <text>
              {{ currentGood.product_name }}
            </text>
          </view>
          <view class="good-img">
            <image :src="currentGood.line_image_url" mode="widthFix" />
          </view>
          <view class="good-desc"> {{ currentGood.description }}</view>
          <view class="good-bottom good-bottom-padding">
            <view class="good-price" style="font-size: 34upx">
              <view class="red">
                ￥{{ currentGood.price }}
                <view style="margin-left: 10rpx">
                  <u-tag text="会员价" type="warning" size="mini2" :plain="true" v-if="currentGood.tag == 4"></u-tag>
                  <u-tag text="特价" type="error" size="mini2" v-if="currentGood.tag == 1"></u-tag>
                </view>
              </view>
              <view class="gray" v-if="currentGood.tag != 0">
                ￥{{ currentGood.current_price }}
              </view>
            </view>
            <!--					<good-plus class="good-plus" :good="currentGood" :isCart="isCart" @specSelect="specSelect"></good-plus>-->
            <block v-if="currentGood.is_select">
              <view class="iconfont vivipos-icon-tianjia" @click="changeCart('+', currentGood)"></view>
            </block>
            <block v-else>
              <view class="btn-spec" v-if="currentGood.product_kind == 1" @click="specSelect(currentGood)">选规格</view>
              <view class="btn-spec" v-if="currentGood.product_kind == 2" @click="composeSelect(currentGood)">选规格</view>
            </block>
          </view>
        </view>
      </u-popup>
      <!--单品规格选择弹窗-->
      <u-popup :safeAreaInsetBottom="true" :show="showGoodSpec" :round="40" mode="bottom" :closeable="true"
        @close="specClose" @touchmove.stop>
        <view class="current-good-spec-box" v-if="currentGood && Object.keys(currentGood).length > 0">
          <view class="title">
            <view class="left">
              <image :src="currentGood.line_image_url" mode="widthFix" />
            </view>
            <view class="right">
              <text>{{ currentGood.product_name }}</text>
              <view class="select-text">
                <text>已选:{{ currentGoodSelectStr(currentGood) }}</text>
              </view>
            </view>
          </view>
          <view class="munber">
            <view>数量</view>
            <view>
              <u-number-box v-model:value="currentGood.qty" step="1" :min="1" @change="changeQty">
                <view slot="minus" class="minus">
                  <u-icon name="minus" size="26rpx"></u-icon>
                </view>
                <text slot="input" class="input" :style="{
                  width: '60rpx',
                  textAlign: 'center',
                }">
                  {{ currentGood.qty }}
                </text>
                <view slot="plus" class="plus">
                  <u-icon name="plus" color="#FFFFFF" size="26rpx"></u-icon>
                </view>
              </u-number-box>
            </view>
          </view>
          <scroll-view class="groups" :scroll-y="true">
            <!--规格-->
            <view class="group-box" v-show="currentGood.units.length > 1">
              <view class="group-title">
                规格
                <text class="sub">
                  {{
                    unitItem.sub_title != undefined
                    ? "（" + unitItem.sub_title + "）"
                    : ""
                  }}
                </text>
              </view>
              <!--循环规格内容-->
              <view class="group-specs">
                <view :class="{ spec: true, select: unitItem.select }" v-for="(unitItem, g) in currentGood.units" :key="g"
                  @click="selectSpec(g)">
                  <text>{{ unitItem.unit_name }}</text>
                  <text v-if="unitItem.price > 0" style="margin-left: 8rpx">
                    {{ unitItem.price > 0 ? "￥" + unitItem.price : "" }}
                  </text>
                </view>
              </view>
            </view>
            <!--调味-->
            <view class="group-box" v-for="(
              condiment_group_item, condiment_group_item_index
            ) in currentGood.condiment_group" :key="condiment_group_item_index">
              <view v-if="condiment_group_item.condiment && condiment_group_item.condiment.length > 0">
                <view class="group-title">
                  {{ condiment_group_item.condiment_group_name }}
                  <text class="sub">
                    {{
                      unitItem.sub_title != undefined
                      ? "（" + unitItem.sub_title + "）"
                      : ""
                    }}
                  </text>
                </view>
                <!--循环调味组内容-->
                <view class="group-specs">
                  <view :class="{
                    condiment_box: true,
                    spec: true,
                    select: condimentItem.select,
                  }" v-for="(condimentItem, g) in condiment_group_item.condiment" :key="g"
                    @click="selectCondiment(g, condiment_group_item_index)">
                    <text> {{ condimentItem.condiment_name }} </text>
                    <text v-if="condimentItem.price > 0" style="margin-left: 8rpx">
                      {{
                        condimentItem.price > 0 ? "￥" + condimentItem.price : ""
                      }}
                    </text>
                    <text v-if="condimentItem.select_number > 1" style="margin-left: 8rpx">
                      {{
                        condimentItem.select_number > 1
                        ? "x" + condimentItem.select_number
                        : ""
                      }}
                    </text>

                    <view class="close" v-if="condimentItem.price > 0 && condimentItem.select_number >= 1
                        " @click.stop="minusSpec(g, condiment_group_item_index)">
                      <u-icon name="close-circle-fill" size="42"></u-icon>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <view style="height: 20rpx"> </view>
          </scroll-view>
          <view class="good-bottom good-bottom-padding">
            <view class="good-price" style="font-size: 34upx">
              <view class="red">
                ￥{{ currentGood.currentGoodPrice
                }}<text style="font-size: 28upx; color: #ccc">
                  {{
                    currentGood.unit_name != ""
                    ? "/" + currentGood.unit_name
                    : currentGood.unit_name
                  }}
                </text>
                <text class="sub" style="font-size: 26upx">
                  {{
                    currentGood.currentGoodPlusPrice > 0
                    ? "（已加价￥" + currentGood.currentGoodPlusPrice + "）"
                    : ""
                  }}
                </text>
              </view>
            </view>
            <view>
              <u-button text="加入购物车" shape="circle" color="#f9ae3d" iconColor="#f9ae3d" @click="addToCart">
              </u-button>
            </view>
          </view>
        </view>
      </u-popup>
      <!--套餐规格选择弹窗-->
      <u-popup :safeAreaInsetBottom="true" :show="showGoodCompose" :round="40" mode="bottom" :closeable="true"
        @close="composeClose" @touchmove.stop>
        <view class="current-good-spec-box" v-if="currentGood && Object.keys(currentGood).length > 0">
          <view class="title">
            <view class="left">
              <image :src="currentGood.line_image_url" mode="widthFix" />
            </view>
            <view class="right">
              <text>{{ currentGood.product_name }}</text>
              <view class="btn" @click="resetSpec">
                <u-button text="重选" plain size="small" type="primary"></u-button>
              </view>
            </view>
          </view>
          <view class="munber">
            <view>数量</view>
            <view>
              <u-number-box v-model:value="currentGood.qty" step="1" :min="1" @change="changeQty">
                <view slot="minus" class="minus">
                  <u-icon name="minus" size="26rpx"></u-icon>
                </view>
                <text slot="input" class="input" :style="{
                  width: '60rpx',
                  textAlign: 'center',
                }">
                  {{ currentGood.qty }}
                </text>
                <view slot="plus" class="plus">
                  <u-icon name="plus" color="#FFFFFF" size="26rpx"></u-icon>
                </view>
              </u-number-box>
            </view>
          </view>
          <scroll-view class="groups" :scroll-y="true">
            <!--套餐-->
            <view class="group-box" v-for="(combos_item, combos_item_index) in currentGood.combos"
              :key="combos_item_index">
              <view class="group-title">
                {{ combos_item.compose_name }}
                <text class="sub">
                  应选{{ combos_item.select_qty }} - 已选{{
                    combos_item.select_number
                  }}
                </text>
              </view>
              <!--循环套餐子菜内容-->
              <view class="group-specs">
                <view :class="{
                  condiment_box: true,
                  spec: true,
                  select: combos_item_dtl.select,
                }" v-for="(combos_item_dtl, g) in combos_item.dtl" :key="g"
                  @click="selectCombosDtl(g, combos_item_index)">
                  <text> {{ combos_item_dtl.product_name }} </text>
                  <text v-if="combos_item_dtl.select_number >= 1" style="margin-left: 8rpx">
                    {{
                      combos_item_dtl.select_number > 1
                      ? "x" + combos_item_dtl.select_number
                      : ""
                    }}
                  </text>

                  <view class="close" v-if="combos_item_dtl.select_number >= 1"
                    @click.stop="delCombosDtl(g, combos_item_index)">
                    <u-icon name="close-circle-fill" size="42"></u-icon>
                  </view>
                </view>
              </view>
            </view>

            <view style="height: 20rpx"> </view>
          </scroll-view>
          <view class="good-bottom good-bottom-padding">
            <view class="good-price" style="font-size: 34upx">
              <view class="red">
                ￥{{ currentGood.currentGoodPrice
                }}<text style="font-size: 28upx; color: #ccc">
                  {{
                    currentGood.unit_name != ""
                    ? "/" + currentGood.unit_name
                    : currentGood.unit_name
                  }}
                </text>
                <text class="sub" style="font-size: 26upx">
                  {{
                    currentGood.currentGoodPlusPrice > 0
                    ? "（已加价￥" + currentGood.currentGoodPlusPrice + "）"
                    : ""
                  }}
                </text>
              </view>
            </view>
            <view>
              <u-button shape="circle" color="#f9ae3d" iconColor="#f9ae3d" @click="addToCart">
                <view style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  height: 100%;
                ">
                  <view style="height: 35rpx; flex: 1">加入购物车</view>
                  <view style="font-size: 24rpx; color: yellow" v-show="showNeedSelect">(尚有应选品)</view>
                </view>
              </u-button>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </scroll-view>
</template>

<script>
import { debounce } from '@/utils/tools.js'
import { mapState, mapGetters } from "vuex";
import _ from "lodash"; //引入mapState, mapGetters
import pageApi from "../../api/page";
export default {
  props: {
    navbarHeight: {
      type: Number,
      default() {
        return 0;
      },
    },
    bannerHeight: {
      type: Number,
      default() {
        return 0;
      },
    },
    searchBoxHeight: {
      type: Number,
      default() {
        return 0;
      },
    },
    list: {
      default() {
        return [];
      },
    },
    showCls: {
      type: Boolean,
      default() {
        return true;
      },
    },
    canSelect: {
      type: Boolean,
      default() {
        return true;
      },
    },
    // 是否是购物车页面
    isCart: {
      type: Boolean,
      default() {
        return false;
      },
    }
  },
  data() {
    return {
      goodsIsScroll: false, // 商品区域是否滚动
      tabSortId: '',
      bannerShow: true,
      currentGoodStyle: {
        width: "90%",
      },
      initGood: [],
      scrollIndex: '',
      rightScrollTop: 0,
      rightScrollTopOld: 0,
      sortIdVal: ''
    };
  },
  mounted() { },
  watch: {
    // rightScrollTopOld: {
    //   handler(newVal, oldVal) {
    //   },
    //   deep: true,
    //   immediate: true
    // },
    // listTemp(newVal, oldVal) {
    // },

  },
  computed: {
    ...mapState({
      cartHeight: (state) => state.cartHeight,
      noMoreHeight: (state) => state.noMoreHeight,
      cartGoods: (state) => state.ordering.cartGoods,
      showGoodSelect: (state) => state.page.showGoodSelect,
      showGoodCompose: (state) => state.page.showGoodCompose,
      showGoodSpec: (state) => state.page.showGoodSpec,
      currentGood: (state) => state.page.currentGood,
      order_info: (state) => state.cart.order_info,
      cart_info: (state) => state.cart.cart_info,
      cart_qty: (state) => state.cart.cart_qty,
      table_no: (state) => state.order.table_no,
    }),
    ...mapGetters({
      stickyHeight: "getStickyHeight",
    }),
    listTemp: function () {
      var that = this;

      return this.list;
    },
    // 当前套餐是否选中应选品
    showNeedSelect() {
      const combos = this.currentGood.combos;
      let noSelectAll = false;
      _.each(combos, (item) => {
        if (item.select_number != item.select_qty) {
          noSelectAll = true;
        }
      });
      return noSelectAll;
    }
  },
  methods: {
    // 滚动
    async goodsScroll(e) {
      var that = this;

      this.rightScrollTopOld = e.detail.scrollTop;

      var rsDom = await that.getSortGoodDom('.g-list');

      var rsDomHeight = [];
      for (var i = 0; i < rsDom.length - 1; i++) {
        rsDomHeight[i] = rsDom[i].height;
      }

      var heightNumArr = [];
      rsDomHeight.reduce(function (prev, cur) {
        heightNumArr.push(prev + cur);
        return prev + cur
      }, 0);

      var scrollIndexNow = heightNumArr.findIndex((val) => this.rightScrollTopOld < val)

      // console.log(4545454);
      // console.log(heightNumArr); //  [348, 1201, 1448, 1695, 1942, 2189, 2436, 2683, 2930, 3177, 3424]
      // console.log(this.rightScrollTopOld);
      // console.log(this.rightScrollTop);
      // console.log(scrollIndexNow);
      if(this.sortIdVal && rsDom[scrollIndexNow].dataset.id != this.sortIdVal) {
          that.$emit('changeLeftTabChild', this.sortIdVal);
          this.sortIdVal = rsDom[scrollIndexNow].dataset.id;
      } else {
        that.$emit('changeLeftTabChild', rsDom[scrollIndexNow].dataset.id);
      }
    },
    // 左侧切换滚动
    async changeScroll(sortId) {
      console.log(44444);
      this.sortIdVal = sortId;
      var that = this;
      var rsDom = await that.getSortGoodDom('.g-list');
      var sortIndex = rsDom.findIndex((val) => val.dataset.id == sortId);

      let scrollNum = rsDom.slice(0, sortIndex).reduce((prev, cur) => prev + Number(cur.height), 0); // 需要滚动的距离
      that.rightScrollTopOld = scrollNum;
      that.rightScrollTop = scrollNum;
    },
    getSortGoodDom(domName) {
      var that = this;
      const query = uni.createSelectorQuery().in(that);
      return new Promise((resolve, reject) => {
        query.selectAll(domName).boundingClientRect(titleName => {
          resolve(titleName)
        }).exec();
      })
    },
    // 仅计算可以直接加入购物车的产品
    getProductQty(good) {
      let qty = 0;
      // if (this.isCart) {
      // 	return good.qty
      // }
      _.each(this.cart_info, (item) => {
        if (good.product_no == item.product_no) {
          qty = item.qty;
        }
      });
      return qty;
    },
    currentGoodSelectStr(currentGood) {
      let str = "";
      let good = JSON.parse(JSON.stringify(currentGood));
      _.each(good.units, (item) => {
        if (item.select) {
          str += item.unit_name;
        }
      });
      _.each(good.condiment_group, (item) => {
        _.each(item.condiment, (condiment_item) => {
          if (condiment_item.select) {
            str += "+";
            str += condiment_item.condiment_name;
            if (parseInt(condiment_item.select_number) > 1) {
              str += "x" + condiment_item.select_number;
            }
          }
        });
      });

      return str;
    },
    // 选择产品规格,单规格
    specSelect(good) {
      // 购物车中查询上一次这个产品最后选择的属性
      const currentGood = _.cloneDeepWith(good);

      const lastIndex = _.findLastIndex(this.cart_info, (item) => {
        return item.product_no == currentGood.product_no;
      });
      const selectCartInfo = this.cart_info[lastIndex];

      currentGood.qty = 1; // 处理默认选择的数量
      const cartCondimentNoArr = [];
      if (lastIndex > -1) {
        currentGood.qty = selectCartInfo.qty;
        _.each(selectCartInfo.condiment, (item) => {
          cartCondimentNoArr[item.condiment_no] = item.qty;
        });
      }

      // 规格默认选中处理
      _.each(currentGood.units, (item) => {
        item.select = false;
        if (
          lastIndex > -1 &&
          item.unit_product_no == selectCartInfo.unit_product_no
        ) {
          item.select = true;
        }
      });
      // 购物车中没有，默认选中第一个规格

      if (lastIndex == -1) {
        currentGood.units[0].select = true;
      }
      // 默认调味选中处理
      _.each(currentGood.condiment_group, (item) => {
        let hasCondiment = false;
        _.each(item.condiment, (condiment_item) => {
          condiment_item.select = false;
          condiment_item.select_number = 0;
          if (
            lastIndex > -1 &&
            cartCondimentNoArr[condiment_item.condiment_no]
          ) {
            condiment_item.select = true;
            condiment_item.select_number =
              cartCondimentNoArr[condiment_item.condiment_no];
            hasCondiment = true;
            return true;
          }
          if (condiment_item.line_default) {
            condiment_item.select = true;
            condiment_item.select_number = 1;
            hasCondiment = true;
          }
        });
        // 默认选中
        // if(!hasCondiment){
        //   item.condiment[0].select = true
        //   item.condiment[0].select_number = 1
        // }
        // 默认不选中
        if (!hasCondiment) {
          if (item.condiment && item.condiment.length > 0) {
            item.condiment[0].select = false;
            item.condiment[0].select_number = 0;
          }
        }
      });

      // 价格
      currentGood.currentGoodPrice = 0;
      // 规格相关
      currentGood.unit_name = "";
      // 加价相关
      currentGood.currentGoodPlusPrice = 0;
      if (lastIndex > -1) {
        currentGood.currentGoodPrice = selectCartInfo.total;
        currentGood.unit_name = selectCartInfo.unit_name;
        currentGood.currentGoodPlusPrice = selectCartInfo.condiment_price;
      }
      this.$store.commit("page/setUnitItem", {
        showGoodSelect: false,
        showGoodSpec: true,
        currentGood: currentGood,
      });
      // 保存初次进入产品选择，用于重选重制
      this.initGood = _.cloneDeepWith(currentGood);

      this.calcProductPrice();
    },
    // 改变数量
    changeQty(e) {
      this.currentGood.qty = e.value;
      this.calcProductPrice();
    },

    /**
     * 列表中进行购物车商品追加
     * @param tyle
     * @param good_tmp
     */
    changeCart(tyle, product, index) {
      const cart_info = _.cloneDeepWith(this.cart_info);
      // 购物车中的加减
      if (this.isCart) {
        switch (tyle) {
          case "-":
            cart_info[index].qty -= 1;
            if (cart_info[index].qty <= 0) {
              // 删除这一条
              cart_info.splice(index, 1);
              break;
            }
            break;
          case "+":
            cart_info[index].qty += 1;
            break;
          default:
            break;
        }
        // 进行入购物车
        pageApi
          .addCart({
            order_info: this.order_info,
            cart_info: cart_info,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$store.commit("cart/setCartInfo", res.data.cart_info);
              this.$store.commit("cart/setOrderInfo", res.data.order_info);
              uni.$emit("changeCart");
            }
          });
        return false;
      }

      let unit = product.units;
      if (unit.length <= 0) {
        // 进行错误提示
        uni.showToast({
          title: "产品规格设置有误",
          icon: "error",
        });
        return false;
      }

      // 代表单规格，直接加入购物车
      if (product.is_select) {
        unit = unit[0];
        // 查询购物车中是否有这个产品
        let hasProduct = false;
        _.each(cart_info, (item, index) => {
          if (
            item.product_no == product.product_no &&
            item.unit_product_no == unit.unit_product_no
          ) {
            tyle == "+" ? (item.qty += 1) : (item.qty -= 1);
            hasProduct = true;
          }
        });
        // 购物车进行产品追加
        if (!hasProduct) {
          let condimentArr = [];
          _.map(product.condiment_group, (condiment_group_item) => {
            _.map(condiment_group_item.condiment, (condiment) => {
              condimentArr.push({
                condiment_name: condiment.condiment_name,
                condiment_no: condiment.condiment_no,
                inv_qty: condiment.inv_qty,
                price: condiment.price,
              });
            });
          });
          cart_info.push({
            product_no: product.product_no,
            product_name: product.product_name,
            alt_name1: product.alt_name1,
            unit_product_no: unit.unit_product_no,
            unit_name: unit.unit_name,
            price: unit.price,
            current_price: unit.current_price,
            vip_price: unit.vip_price,
            tag: unit.tag,
            qty: 1,
            box_price: unit.box_price,
            condiment: condimentArr,
            combos: product.combos,
            non_product: true,
            product_kind: product.product_kind,
            bargain_no: product.bargain_no,
            product_set_calc: product.product_set_calc,
          });
        }
        // 进行入购物车
        pageApi
          .addCart({
            order_info: this.order_info,
            cart_info: cart_info,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$store.commit("cart/setCartInfo", res.data.cart_info);
              this.$store.commit("cart/setOrderInfo", res.data.order_info);
              uni.$emit("changeCart");
              this.goodClose();
            }
          });
      }

      // 判断购物车是否有相同产品，相同规格 和 相同 调味

      return false;
      if (this.cartGoods["_" + good.id] == undefined) {
        this.$set(this.cartGoods, "_" + good.id, good);
      }
      let goodItem = this.cartGoods["_" + good.id];
      if (this.cartGoods["_" + good.id].number == undefined) {
        this.$set(goodItem, "number", 1);
        if (good.isSpec) {
          this.$set(goodItem.spceGoods[good.spec_key], "number", 1);
        }
      } else {
        switch (tyle) {
          case "+":
            goodItem.number++;
            if (good.isSpec) {
              goodItem.spceGoods[good.spec_key].number++;
            }
            break;
          case "-":
            goodItem.number--;
            if (good.isSpec) {
              goodItem.spceGoods[good.spec_key].number--;
            }
            break;
        }
      }
      setTimeout(() => {
        this.$store.commit("ordering/setCartStructure");
        uni.$emit("changeCart");
      }, 0);
    },

    // 打开套餐弹窗
    composeSelect(good) {
      // 购物车中查询上一次这个产品最后选择的属性
      const currentGood = _.cloneDeepWith(good);

      const lastIndex = _.findLastIndex(this.cart_info, (item) => {
        return (
          item.product_no == currentGood.product_no && item.product_kind == 2
        ); // 套餐头
      });

      const selectCartInfo = this.cart_info[lastIndex];
      currentGood.qty = 1; // 处理默认选择的数量
      // 选择的套餐子菜编号和数量
      const cartComposeNoArr = [];
      if (lastIndex > -1) {
        currentGood.qty = selectCartInfo.qty;
        _.each(selectCartInfo.combos, (item) => {
          cartComposeNoArr[item.compose_no + "_" + item.product_no] =
            item.select_number;
        });
      }
      // 选择的调味编号和数量
      const cartCondimentNoArr = [];
      if (lastIndex > -1) {
        currentGood.qty = selectCartInfo.qty;
        _.each(selectCartInfo.condiment, (item) => {
          cartCondimentNoArr[item.condiment_no] = item.qty;
        });
      }

      // 规格默认选中处理
      _.each(currentGood.units, (item) => {
        item.select = false;
        if (
          lastIndex > -1 &&
          item.unit_product_no == selectCartInfo.unit_product_no
        ) {
          item.select = true;
        }
      });
      // 购物车中没有，默认选中第一个规格
      if (lastIndex == -1) {
        currentGood.units[0].select = true;
      }

      // 默认子菜选中处理
      _.each(currentGood.combos, (item) => {
        // 已选
        item.select_number = 0;
        // 循环子菜
        _.each(item.dtl, (combos_dtl_item) => {
          let hasCombosDtl = false;
          combos_dtl_item.select = false;
          combos_dtl_item.select_number = 0;

          // 购物车里面是否有

          if (
            lastIndex > -1 &&
            cartComposeNoArr[item.compose_no + "_" + combos_dtl_item.product_no]
          ) {
            combos_dtl_item.select = true;
            combos_dtl_item.select_number =
              cartComposeNoArr[
              item.compose_no + "_" + combos_dtl_item.product_no
              ];
            hasCombosDtl = true;
          }

          // 默认选中
          if (!hasCombosDtl && combos_dtl_item.is_default) {
            combos_dtl_item.select = true;
            combos_dtl_item.select_number = 1;
          }

          item.select_number += combos_dtl_item.select_number;
        });
        // 默认选中
        // if(!hasCombosDtl){
        //   item.condiment[0].select = true
        //   item.condiment[0].select_number = 1
        // }
      });

      // 默认调味选中处理
      _.each(currentGood.condiment_group, (item) => {
        let hasCondiment = false;
        _.each(item.condiment, (condiment_item) => {
          condiment_item.select = false;
          condiment_item.select_number = 0;
          if (
            lastIndex > -1 &&
            cartCondimentNoArr[condiment_item.condiment_no]
          ) {
            condiment_item.select = true;
            condiment_item.select_number =
              cartCondimentNoArr[condiment_item.condiment_no];
            hasCondiment = true;
            return true;
          }
          if (condiment_item.line_default) {
            condiment_item.select = true;
            condiment_item.select_number = 1;
            hasCondiment = true;
          }
        });
        // 默认选中
        if (!hasCondiment) {
          if (item.condiment && item.condiment.length > 0) {
            item.condiment[0].select = true;
            item.condiment[0].select_number = 1;
          }
        }
      });

      // 价格
      currentGood.currentGoodPrice = 0;
      // 规格相关
      currentGood.unit_name = "";
      // 加价相关
      currentGood.currentGoodPlusPrice = 0;
      if (lastIndex > -1) {
        currentGood.currentGoodPrice = selectCartInfo.total;
        currentGood.unit_name = selectCartInfo.unit_name;
        currentGood.currentGoodPlusPrice = selectCartInfo.condiment_price;
      }
      this.$store.commit("page/setUnitItem", {
        showGoodSelect: false,
        showGoodSpec: false,
        showGoodCompose: true,
        currentGood: currentGood,
      });
      this.initGood = _.cloneDeepWith(currentGood);
      this.calcProductPrice();
    },

    // 当前规格加入购物车
    addToCart() {
      // 尚有应选品
      if (this.showNeedSelect) {
        return false;
      }
      const currentGood = _.cloneDeepWith(this.currentGood);
      // 规格
      for (var i in currentGood.units) {
        let item = currentGood.units[i];
        if (!item.select) {
          currentGood.units.splice(i, 1);
        }
      }
      const selectUnit = currentGood.units[0];
      const unit_product_no = currentGood.units[0].unit_product_no;
      // 调味
      const condimentArr = [];
      // 当前选中的所有调味编号
      const condimentNoArr = [];
      _.each(currentGood.condiment_group, (item) => {
        _.each(item.condiment, (condiment_item) => {
          if (condiment_item.select) {
            condimentNoArr.push(condiment_item.condiment_no);
            condimentArr.push({
              condiment_no: condiment_item.condiment_no,
              condiment_name: condiment_item.condiment_name,
              price: condiment_item.price,
              qty: condiment_item.select_number,
              inv_qty: condiment_item.inv_qty,
            });
          }
        });
      });
      // 当前选中的所有套餐编号
      const combosArr = [];
      const combosNoArr = [];
      _.each(currentGood.combos, (item) => {
        _.each(item.dtl, (dtl_item) => {
          if (dtl_item.select) {
            combosNoArr.push(dtl_item.unit_product_no);
            combosArr.push({
              product_no: dtl_item.product_no,
              product_name: dtl_item.product_name,
              unit_product_no: dtl_item.unit_product_no,
              unit_name: dtl_item.unit_name,
              current_price: dtl_item.current_price,
              qty:
                _.toNumber(dtl_item.select_number) * _.toNumber(dtl_item.qty), // 选择的份数*每一份包含的数量
              select_number: dtl_item.select_number, // 选择项目的数量
              compose_no: item.compose_no,
            });
          }
        });
      });

      const cart_info = _.cloneDeepWith(this.cart_info);

      // 查询当前是否有相同的产品，相同的规格，相同的调味
      const cartIndex = _.findLastIndex(cart_info, (item) => {
        // 购物车当前产品的调味
        let itemCondimentNoArr = [];
        _.each(item.condiment, (condiment_item) => {
          itemCondimentNoArr.push(condiment_item.condiment_no);
        });

        // 购物车当前选中产品的套餐子菜
        let itemCombosNoArr = [];
        _.each(item.combos, (item) => {
          itemCombosNoArr.push(item.unit_product_no);
        });
        // 返回套餐相同，规格相同，套餐相同的 购物车
        return (
          item.product_no == currentGood.product_no &&
          item.unit_product_no == unit_product_no &&
          _.sortedUniq(itemCondimentNoArr).join(",") ==
          _.sortedUniq(condimentNoArr).join(",") &&
          _.sortedUniq(itemCombosNoArr).join(",") ==
          _.sortedUniq(combosNoArr).join(",")
        );
      });
      // 代表购物车找到了相同的规格产品，进行数量追加
      if (cartIndex > -1) {
        const _selectCartInfo = cart_info[cartIndex]; // 当前购物车需要操作的产品
        // 产品数量
        _selectCartInfo.qty = currentGood.qty;
        // 进行入购物车
        pageApi
          .addCart({
            order_info: this.order_info,
            cart_info: cart_info,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$store.commit("cart/setCartInfo", res.data.cart_info);
              this.$store.commit("cart/setOrderInfo", res.data.order_info);
              uni.$emit("changeCart");
              this.specClose();
            }
          });
        return;
      }
      cart_info.push({
        product_no: currentGood.product_no,
        product_name: currentGood.product_name,
        alt_name1: currentGood.alt_name1,
        unit_product_no: selectUnit.unit_product_no,
        unit_name: selectUnit.unit_name,
        price: selectUnit.price,
        current_price: selectUnit.current_price,
        vip_price: selectUnit.vip_price,
        tag: selectUnit.tag,
        qty: currentGood.qty,
        box_price: selectUnit.box_price,
        condiment: condimentArr,
        combos: combosArr,
        non_product: true,
        product_kind: currentGood.product_kind,
        bargain_no: selectUnit.bargain_no,
        bargain_price: selectUnit.bargain_price,
        product_set_calc: currentGood.product_set_calc,
      });

      // 进行入购物车
      pageApi
        .addCart({
          order_info: this.order_info,
          cart_info: cart_info,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$store.commit("cart/setCartInfo", res.data.cart_info);
            this.$store.commit("cart/setOrderInfo", res.data.order_info);
            uni.$emit("changeCart");
            this.specClose();
          }
        });
    },
    resetSpec() {
      // 拷贝商品
      // let _tmp = JSON.stringify(this.initGood);
      // this.$store.commit("ordering/set", {
      // 	currentGood: JSON.parse(_tmp),
      // });
      const currentGood = _.cloneDeepWith(this.initGood);

      this.$store.commit("page/setCurrentGood", currentGood);

      this.calcProductPrice();
    },
    // 计算每一个分类的高度
    getRect(realBottom = 0) {
      //#ifdef MP-ALIPAY
      realBottom = -60;
      //#endif
      return new Promise((resolve, reject) => {
        let hList = [];
        hList.push(realBottom);
        const query = uni.createSelectorQuery().in(this).selectAll(".g-list");
        let gPos = realBottom;
        query
          .boundingClientRect((data) => {
            data.forEach((o, i) => {
              // if (i === 0) {
              //     gPos = realBottom;
              // } else {
              gPos += o.height;
              // }
              hList.push(gPos);
            });
            resolve(hList);
          })
          .exec();
      });
    },
    // 展示产品详情页面
    goodSelect(good) {
      if (this.canSelect && !good.is_c_out) {
        this.$store.commit("page/setShowGoodSelect", true);
        this.$store.commit("page/setCurrentGood", good);
      }
    },
    // 产品详情窗关闭
    goodClose() {
      this.$store.commit("page/setShowGoodSelect", false);
      this.$nextTick(() => {
        this.$store.commit("page/setCurrentGood", {});
      });
    },
    // 关闭规格
    specClose() {
      this.$store.commit("page/setShowGoodSpec", false);
      this.$store.commit("page/setShowGoodCompose", false);
      this.$nextTick(() => {
        this.$store.commit("page/setCurrentGood", {});
      });
    },
    // 关闭套餐弹窗
    composeClose() {
      this.$store.commit("page/setShowGoodCompose", false);
      this.$store.commit("page/setShowGoodSpec", false);
      this.$nextTick(() => {
        this.$store.commit("page/setCurrentGood", {});
      });
    },
    // 选择规格
    selectSpec(g, s) {
      const currentGood = _.cloneDeepWith(this.currentGood);
      let unit = currentGood.units[g];
      _.each(currentGood.units, (item) => {
        item.select = false;
      });
      unit.select = true;
      this.$store.commit("page/setCurrentGood", currentGood);
      this.calcProductPrice();
      // this.getSelectProductPrice()
    },

    // 选择调味
    selectCondiment(condimentIndex, condimentGroupIndex) {
      let condimentGroup =
        this.currentGood.condiment_group[condimentGroupIndex];
      let condiment = condimentGroup.condiment;
      // 单选还是多选
      if (condimentGroup.select_type == "single") {
        _.each(condiment, (item) => {
          item.select = false;
          item.select_number = 0;
        });
        condiment[condimentIndex].select = true;
        condiment[condimentIndex].select_number = 1;
      } else {
        // 多选，必须选择一个
        if (condiment[condimentIndex].price > 0) {
          condiment[condimentIndex].select_number += 1;
          condiment[condimentIndex].select = true;
          this.calcProductPrice();
          return;
        }
        let selectNum = 0;
        _.each(condiment, (item) => {
          if (item.select) selectNum += 1;
        });
        condiment[condimentIndex].select_number = 0;

        if (selectNum > 1) {
          condiment[condimentIndex].select = !condiment[condimentIndex].select;
          condiment[condimentIndex].select_number =
            condiment[condimentIndex].select_number > 0 ? 0 : 1;
        } else {
          condiment[condimentIndex].select_number = 1;
          condiment[condimentIndex].select = true;
        }
      }
      // this.getSelectProductPrice()
      this.calcProductPrice();
    },

    // 计算当前规格价格
    calcProductPrice() {
      const order_info = this.order_info;
      // 获取当前产品的计算价格
      let currentGood = _.cloneDeepWith(this.currentGood);
      // 规格
      for (var i in currentGood.units) {
        let item = currentGood.units[i];
        if (!item.select) {
          currentGood.units.splice(i, 1);
        }
      }
      // 调味
      const condiment = [];
      _.each(currentGood.condiment_group, (item) => {
        _.each(item.condiment, (condiment_item) => {
          if (condiment_item.select) {
            condiment.push({
              condiment_no: condiment_item.condiment_no,
              price: condiment_item.price,
              qty: condiment_item.select_number,
            });
          }
        });
      });
      currentGood.condiment = condiment;
      // 套餐相关,计算选中的价格
      const combos = [];
      _.each(currentGood.combos, (item) => {
        _.each(item.dtl, (dtl_item) => {
          if (dtl_item.select) {
            combos.push({
              product_no: dtl_item.product_no,
              product_name: dtl_item.product_name,
              unit_product_no: dtl_item.unit_product_no,
              unit_name: dtl_item.unit_name,
              current_price: dtl_item.current_price,
              select_number: dtl_item.select_number, // 选择了几份
              qty: dtl_item.qty, // 每一份有多少个
            });
          }
        });
      });
      currentGood.combos = combos;

      let currentGoodPrice = 0;
      let unit_name = "";
      let currentGoodPlusPrice = 0;
      // 计算规格的价格

      _.each(currentGood.units, (item) => {
        if (
          currentGood.product_kind == 1 ||
          (currentGood.product_kind == 2 && currentGood.product_set_calc == 1)
        ) {
          // 原价
          if (currentGood.tag == 0) {
            currentGoodPrice += item.current_price;
          }
          // 特价
          if (currentGood.tag == 1) {
            currentGoodPrice += item.bargain_price;
          }
          // 会员价
          if (currentGood.tag == 4) {
            currentGoodPrice += item.vip_price;
          }
        }
        unit_name = item.unit_name;
      });
      // 计算调味的价格
      _.each(currentGood.condiment, (item) => {
        currentGoodPrice += item.price * item.qty;
        currentGoodPlusPrice += item.price * item.qty;
      });

      // 计算套餐子菜的价格
      _.each(currentGood.combos, (item) => {
        // 固定价格
        currentGoodPrice +=
          _.toNumber(item.current_price) *
          _.toNumber(item.select_number) *
          _.toNumber(item.qty);
        // if (currentGood.product_set_calc==1){
        // }
        // 子菜合计价格
      });

      // 价格
      this.currentGood.currentGoodPrice = parseFloat(
        currentGoodPrice * currentGood.qty
      ).toFixed(2);
      // 规格
      this.currentGood.unit_name = unit_name;
      // 加价
      this.currentGood.currentGoodPlusPrice = parseFloat(
        currentGoodPlusPrice * currentGood.qty
      ).toFixed(2);
      this.$store.commit(
        "page/setCurrentGood",
        _.cloneDeepWith(this.currentGood)
      );
    },

    // 选择套餐
    selectCombosDtl(combosDtlIndex, combosIndex) {
      let combosItem = this.currentGood.combos[combosIndex];
      let combosDtl = combosItem.dtl;
      if (combosItem.select_qty <= combosItem.select_number) {
        return;
      }
      combosDtl[combosDtlIndex].select = true;
      if (!combosDtl[combosDtlIndex].select_number) {
        combosDtl[combosDtlIndex].select_number = 0;
      }
      combosDtl[combosDtlIndex].select_number += 1;
      combosItem.select_number += 1;
      this.calcProductPrice();
    },

    // 计算选中规格的价格
    getSelectProductPrice() {
      // 获取当前产品的计算价格
      let currentGood = _.cloneDeepWith(this.currentGood);
      // 规格
      for (var i in currentGood.units) {
        let item = currentGood.units[i];
        if (!item.select) {
          currentGood.units.splice(i, 1);
        }
      }
      // 调味
      const condiment = [];
      _.each(currentGood.condiment_group, (item) => {
        _.each(item.condiment, (condiment_item) => {
          if (condiment_item.select) {
            condiment.push({
              condiment_no: condiment_item.condiment_no,
              price: condiment_item.price,
              qty: condiment_item.select_number,
            });
          }
        });
      });
      currentGood.condiment = condiment;
      // 套餐相关
      const combos = [];
      _.each(currentGood.combos, (item) => {
        _.each(item.dtl, (dtl_item) => {
          if (dtl_item.select) {
            combos.push({
              product_no: dtl_item.product_no,
              product_name: dtl_item.product_name,
              unit_product_no: dtl_item.unit_product_no,
              unit_name: dtl_item.unit_name,
              current_price: dtl_item.current_price,
              qty: dtl_item.select_number,
            });
          }
        });
      });
      currentGood.combos = combos;
      pageApi.getSelectProductPrice(currentGood).then((res) => {
        // 价格
        this.currentGood.currentGoodPrice = res.data.total;
        // 规格
        this.currentGood.unit_name = res.data.unit_name;
        // 加价
        this.currentGood.currentGoodPlusPrice = res.data.condiment_price;
        this.$store.commit(
          "page/setCurrentGood",
          _.cloneDeepWith(this.currentGood)
        );
      });
    },

    // 取消调味选择
    minusSpec(condimentIndex, condimentGroupIndex) {
      let condimentGroup =
        this.currentGood.condiment_group[condimentGroupIndex];
      let condiment = condimentGroup.condiment;
      condiment[condimentIndex].select = false;
      condiment[condimentIndex].select_number = 0;
      this.calcProductPrice();
    },
    // 取消规格选择
    delCombosDtl(combosDtlIndex, combosIndex) {
      let combosItem = this.currentGood.combos[combosIndex];
      let combosDtl = combosItem.dtl;
      combosDtl[combosDtlIndex].select = false;
      combosItem.select_number -= combosDtl[combosDtlIndex].select_number;
      if (combosItem.select_number <= 0) {
        combosItem.select_number = 0;
      }
      combosDtl[combosDtlIndex].select_number = 0;
      this.calcProductPrice();
    },
    // 商品总价计算方式
    goodPriceCalculation(money, spec, good = undefined) {
      let currentGood = this.currentGood;
      if (good != undefined) {
        currentGood = good;
      }
      switch (spec.calculation) {
        case "plus":
          currentGood.currentGoodPrice += money;
          currentGood.currentGoodPlusPrice += money;
          break;
        case "replace":
          currentGood.currentGoodPrice = money;
          currentGood.unit = spec.name;
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-list-box {
  height: 100%;
  position: relative;
}

.current-good-spec-box {
  .title {
    height: 260rpx;
    border-bottom: 1rpx #ccc solid;

    .left {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
      padding: 50rpx 0 30rpx 0;

      image {
        height: 180rpx !important;
        width: 180rpx !important;
      }
    }

    .right {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      padding: 50rpx 50rpx 30rpx 0;
      height: 180rpx;
      font-size: 30upx;

      .select-text {
        font-size: 24rpx;
        color: #959595;
        max-height: 100rpx;
        overflow: hidden;
        //white-space: normal;
        //text-overflow: ellipsis;
      }

      .btn {
        width: 100%;

        button {
          float: right;
          width: 80rpx;
          right: 30rpx;
        }
      }
    }
  }

  .munber {
    display: flex;
    justify-content: space-between;
    padding: 50rpx;
  }

  .groups {
    height: 600rpx;

    .group-title {
      padding: 20rpx 40rpx;
    }

    .group-specs {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30rpx;

      .condiment_box {
        width: 22%;
        position: relative;

        .close {
          position: absolute;
          right: 0rpx;
        }
      }

      .spec {
        font-size: 26upx;
        padding: 10rpx 30rpx;
        margin-left: 15rpx;
        margin-bottom: 15rpx;
        border-radius: 50rpx;
        border: 1rpx #c6c6c6 solid;
        background: rgba($color: #c6c6c6, $alpha: 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
      }

      .select {
        border: 1rpx #f9ae3d solid;
        background: rgba($color: #f9ae3d, $alpha: 0.2);
        color: #f9ae3d;
      }
    }
  }
}

.sub {
  font-size: 26upx;
  color: #666;
}

.current-good-box {
  .good-name {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 160rpx;
    border-bottom: 1rpx #ccc solid;

    text {
      width: 100%;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .good-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    image {
      margin: 50rpx;
      width: 400rpx !important;
      height: 400rpx !important;
    }
  }

  .good-desc {
    margin: 20rpx 20rpx 80rpx 20rpx;
    //text-indent: 20rpx;
  }
}

.good-bottom {
  font-size: 30upx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .good-price {
    .red {
      color: red;
      display: flex;
      align-items: center;

      .u-tag {
        margin-left: 10rpx;
      }
    }

    .gray {
      color: #ccc;
      text-decoration: line-through;
      font-size: 26upx;
    }

    .spec-key {
      color: #999;
      font-size: 26upx;
    }
  }
}

.good-bottom-padding {
  padding: 30rpx;
  border-top: 1rpx #ccc solid;
}

.good-list {
  background-color: #fff;
  /* #ifdef MP-ALIPAY*/
  flex: 1;

  /* #endif */
  .good-cls {
    position: sticky;
    top: 0;
    height: 90rpx;
    background-color: #fff;
    z-index: 2;
    font-size: 30upx;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
  }

  .good-li {
    display: flex;
    align-items: center;
    padding: 20upx;
    border-top: 1rpx solid #eee;
    position: relative;

    .good-img {
      width: 160rpx;
      height: 160rpx !important;
      margin-right: 20rpx;
      position: relative;

      image {
        width: 160rpx;
        height: 160rpx !important;
      }

      .sell-out {
        position: absolute;
        left: 0;
        bottom: 0rpx;
        width: 160rpx;
        background-color: #000000;
        opacity: 0.5;
        color: white;
        text-align: center;
        font-size: 24rpx;
      }
    }

    .good-num {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 10rpx;
      left: 10rpx;
      color: #ffffff;
      background-color: #e9551f;
      height: 32rpx;
      width: 32rpx;
      font-size: 28rpx;
      border: 1rpx solid #e9551f;
      border-radius: 28rpx;
    }

    .flex-item {
      flex: 1;
      min-height: 160rpx;
      display: flex;
      flex-direction: column;

      .good-name {
        width: 100%;
        font-size: 28upx;
        flex: 1;
        overflow: hidden;

        .combos-key {
          color: #999;
          font-size: 26upx;
        }
      }

      .good-info {
        .good-price {
          float: left;
          font-size: 26upx;
          color: red;
        }
      }
    }
  }
}

.is-c-out {
  background-color: #fff;
  opacity: 0.3;
}

.minus {
  width: 40rpx;
  height: 40rpx;
  border-width: 1px;
  border-color: #e6e6e6;
  border-top-left-radius: 100rpx;
  border-top-right-radius: 100rpx;
  border-bottom-left-radius: 100rpx;
  border-bottom-right-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: #ccc 1rpx solid;
}

.plus {
  width: 40rpx;
  height: 40rpx;
  background-color: #e38c3a;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vivipos-icon-tianjia {
  color: #e38c3a;
  font-size: 50rpx;
}

.vivipos-icon-minus {
  color: #e38c3a;
  font-size: 50rpx;
}

.btn-spec {
  //color: #fff;
  color: orange;
  font-size: 22rpx;
  background-color: #fff;
  border-radius: 20rpx;
  border: solid 2rpx orange;
  padding: 0rpx 10rpx;
  //border-radius: 8rpx;
  //font-weight: 700;
}
</style>
